<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>直播间开播推送</title>
    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/hotui/css/font-awesome.min.css" th:href="@{/resource/hotui/css/font-awesome.min.css}"
          rel="stylesheet">
    <!-- Morris -->
    <link href="../../resource/hotui/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/resource/hotui/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">
    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>
    <link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
          rel="stylesheet">
    <style>
        body, html {
            min-width: 800px !important;
        }

        #edit_form button {
            padding: 4px 12px;
        }

        .form-control {
            display: inline-block;
            margin-right: 5px;
        }

        .panel-body {
            min-width: 770px;
        }

        .form-box {
            position: relative;
            display: flex;
            flex-direction: row;

        }

        .template-preview .template-body {
            border: 1px solid #f5f5f5;
            width: 350px;
            padding: 10px;
            color: #CCCCCC;
            margin-top: 10px;
        }

        .template-preview .template-body span {
            color: #231a22;
        }

        .template-preview .template-body .template-title {
            font-size: 14px;
            margin-bottom: 5px;
            color: #000000;
        }

        .template-preview .template-body .template-first {
            margin-bottom: 10px;
            color: #ccc;
        }

        .template-preview .template-body .template-remark {
            margin-top: 10px;
        }

        #liveTemplate {
            width: 50%;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="ibox float-e-margins m-b-none">
            <div class="col-sm-12">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li class="active"><a class="tab1" data-toggle="tab" href="#tab-1"
                                              aria-expanded="true">直播间开播提醒</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <!--基本配置-->
                        <div id="tab-1" class="tab-pane active">
                            <div class="panel-body form-box">
                                <form class="form-horizontal" id="liveTemplate">
                                    <div class="form-group">
                                        <label class="col-sm-6 control-label">直播间ID</label>
                                        <div class="col-sm-4">
                                            <input type="text" value="" id="roomId" name="roomId"
                                                   maxlength="30" class="form-control only-num input-text"
                                                   style="width: 150px;">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-6 control-label">直播间主题</label>
                                        <div class="col-sm-4">
                                            <input type="text" value="您好，您关注的直播间即将开播，请提前做好入场准备" id="first" name="first"
                                                   onchange="jsHelper.inputChange()"
                                                   maxlength="30" class="form-control input-text" style="width: 150px;">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-6 control-label">直播时间</label>
                                        <div class="col-sm-4">
                                            <input type="text" value="" id="time" placeholder="服务时长"
                                                   onchange="jsHelper.inputChange()"
                                                   name="time" style="width: 150px;"
                                                   class="form-control input-text">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-6 control-label">预估时长</label>
                                        <div class="col-sm-4">
                                            <input type="text" value="" id="duration" placeholder="服务预估时长"
                                                   onchange="jsHelper.inputChange()"
                                                   name="duration" style="width: 150px;"
                                                   class="form-control input-text">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-6 control-label">主播名称</label>
                                        <div class="col-sm-4">
                                            <input type="text" value="" id="directorName" placeholder="服务人员名称"
                                                   onchange="jsHelper.inputChange()"
                                                   name="directorName" style="width: 150px;"
                                                   class="form-control input-text">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-6 control-label">备注</label>
                                        <div class="col-sm-4">
                                            <input type="text" value="精彩内容，不容错过，赶紧加入吧~" id="remark"
                                                   onchange="jsHelper.inputChange()"
                                                   name="remark" style="width: 250px;"
                                                   class="form-control input-text">
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <label class="col-sm-6 control-label">测试用户手机号</label>
                                        <div class="col-sm-4">
                                            <input type="text" value="" id="testUserMobile" placeholder="选填，发送测试预览消息时必填"
                                                   name="testUserMobile" style="width: 250px;"
                                                   class="form-control input-text">
                                        </div>
                                    </div>

                                </form>


                                <div class="template-preview">
                                    <div>示例效果：</div>
                                    <div class="template-body">
                                        <div class="template-title">预约服务开始通知</div>
                                        <div class="template-first">您好,您关注的直播间即将开播，请提前做好入场准备。</div>
                                        <div>服务时间：<span class="template-time">2020-09-01 20：00</span></div>
                                        <div>服务预估时长：<span class="template-duration">约3小时</span></div>
                                        <div>服务类型：<span>直播</span></div>
                                        <div>服务人员名称：<span class="template-directorName">主播名</span></div>
                                        <div class="template-remark">
                                            备注内容
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="panel-body">
                                <div class="form-group" style="margin-top: 10px;">
                                    <div class="col-sm-8 col-sm-offset-5">
                                        <button class="btn btn-success btn-submit" type="button"
                                                onclick="jsHelper.btnSubmit(0)">发送推送消息
                                        </button>
                                        <button class="btn btn-success btn-submit" type="button"
                                                onclick="jsHelper.btnSubmit(1)">发送测试预览消息
                                        </button>
                                        <span>预计推送人数：</span><span th:text="${subscribeCount}">1</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js(123123)}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js(12312)}"></script>

<script type="text/javascript" th:inline="javascript">
    const editUri = /*[[@{/wx/template/live/template/send}]]*/  "";
    const editUriUser = /*[[@{/wx/template/live/template/send/user}]]*/  "";
</script>
<script type="text/javascript">
    let jsHelper = {
        inputChange() {
            let liveTemplate = $("#liveTemplate").parseForm();
            $(".template-first").text(liveTemplate.first);
            $(".template-time").text(liveTemplate.time);
            $(".template-duration").text(liveTemplate.duration);
            $(".template-directorName").text(liveTemplate.directorName);
            $(".template-remark").text(liveTemplate.remark);
        },
        btnSubmit: function (type) {
            let self = this;
            let flag = true;
            $("#liveTemplate .input-text").each(function () {
                let value = $(this).val();
                if (typeof value === "undefined" || value.length === 0) {
                    flag = false;
                }
            });
            if (!flag) {
                hot.tip.error("请完善表单内容");
                return;
            }

            let liveTemplate = $("#liveTemplate").parseForm();
            let param = {};
            $.extend(param, liveTemplate);

            if (type === 1 && liveTemplate.testUserMobile.length === 0) {
                hot.tip.error("请填写测试手机");
                return;
            }

            hot.ajax(type === 0 ? editUri : editUriUser, param, function (ret) {
                if (ret.resultCode === 2000) {
                    hot.tip.success("提交成功", function () {
                        if (type === 0) {
                            window.location.reload();
                        }
                    });
                } else {
                    hot.tip.error(ret.resultMsg);
                }
            }, () => {
            }, "post");
        }
    };
</script>
</body>

</html>
